<script setup>
	import { reactive, ref } from 'vue'
	import { useUserStore } from "@/stores/user.js"
	const userStore = useUserStore()

	const login = async () => {
		const { code } = await uni.login()
		await userStore.login(code)
		uni.reLaunch({ url: "/pages/chat-view/index" })
	}
</script>

<template>
	<view class="login-page">
		<image class="login-image" src="/static/images/login.png" mode="widthFix"></image>
		<text class="login-tips">登录体验更多AI功能</text>
		<view class="login-view">
			<!-- 头像 -->
			<!-- <button open-type="chooseAvatar" class="avatar-button" @chooseavatar="chooseavatar">
				<image class="avatar" :src="userInfo.avatar === '' ? '/static/images/touxiang.png' : userInfo.avatar"></image>
			</button>
			<form class="form-submit" @submit="fromSubmit">
				<input type="nickname" class="weui-input" name="input" placeholder="请输入昵称" />
				<button form-type="submit" class="submit-button" :loading="loading" @click="login">登录</button>
			</form> -->
			<button type="primary" class="wx-login" @click="login">微信一键登录</button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.wx-login {
		margin-top: 60rpx;
		padding: 0 30rpx;
	}

	.login-page {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: #ffffff;
		z-index: 200;

		.login-image {
			width: 100%;
			margin-top: 110rpx;
		}

		.login-tips {
			font-weight: bold;
			padding: 40rpx 20rpx;
		}

		.login-view {
			display: flex;
			flex-direction: column;
			align-items: center;

			.avatar-button {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				padding: 0;
				overflow: hidden;

				.avatar {
					width: 100%;
					height: 100%;
				}
			}

			.form-submit {
				width: 100%;

				.weui-input {
					padding: 20rpx;
					margin: 20rpx;
					border-bottom: 1rpx solid #f2f2f2;
				}

				.submit-button {
					background: linear-gradient(to right, #A2C5FE, #C0E7FD);
					padding: 15rpx 0;
					margin: 55rpx 20rpx 0 20rpx;
				}
			}
		}
	}
</style>